<template>
  <q-page class="my-page">
    <div class="row items-center justify-between">
      <div class="my-page-header">
        <q-breadcrumbs align="left">
          <q-breadcrumbs-el label="根目录" />
        </q-breadcrumbs>
      </div>
    </div>
    <div class="my-page-body my-table">
      <div class="my-table">
        <q-table
          :data="data"
          :columns="columns"
          :pagination.sync="pagination"
          :loading="loading"
          @request="onRequest"
          square
          grid
          hide-header
        >
          <template v-slot:no-data="{ message }">
            <div class="full-width row flex-center q-gutter-sm q-pa-lg">
              <span>
                {{ message }}
              </span>
            </div>
          </template>
          <template v-slot:item="props">
            <div class="col-xs-6 col-sm-3 col-md-1">
              <q-img :src="baseUrl+props.row.brandCover" />
            </div>
          </template>
        </q-table>
      </div>
    </div>
  </q-page>
</template>

<script>
import axios from 'axios'
export default {
  name: 'UserList',
  data () {
    return {
      baseUrl: axios.defaults.baseURL,
      loading: false,
      pagination: {
        sortBy: '',
        descending: false,
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10
      },
      columns: [
        { name: 'brandName', field: 'brandName' },
        { name: 'brandCover', field: 'brandCover' },
        { name: 'brandLogo', field: 'brandLogo' }
      ],
      data: []
    }
  },
  mounted () {
    // get initial data from server (1st page)
    this.onRequest({
      pagination: this.pagination,
      filter: undefined
    })
  },
  methods: {
    onRefresh () {
      this.pagination.page = 0
      this.onRequest({
        pagination: this.pagination,
        filter: undefined
      })
    },
    async onRequest (props) {
      const { page, rowsPerPage, sortBy, descending } = props.pagination
      const filter = props.filter
      this.loading = true
      const data = {
        "records": [{
          "id": "1296371026187321345",
          "created": "2020-08-20T16:58:33.000+0800",
          "storeId": "0",
          "brandLogo": "/userfiles/fileupload/202009/1306830975208062977.jpg",
          "brandCover": "/userfiles/fileupload/202008/img-12.jpg",
          "brandInitial": "N",
          "brandName": "小牛电车",
          "summary": "小牛电车，老太老头专属代步车！",
          "content": "<u><b>大江大河，小牛电车农村包围城市。</b></u>",
          "sort": 10,
          "status": "0",
          "brandRecommend": "1",
          "brandApply": "1"
        }],
        "total": 1,
        "size": 10,
        "current": 1,
        "orders": [],
        "hitCount": false,
        "searchCount": true,
        "pages": 1
      }
      this.pagination.page = data.current
      this.pagination.rowsNumber = data.total
      this.pagination.rowsPerPage = data.size

      this.pagination.sortBy = sortBy
      this.pagination.descending = descending
      this.data = data.records
      // await axios.get('/admin/goods/brands', { params: { current: page, size: rowsPerPage, username: filter } }).then(response => {
      //   const { code, data } = response.data
      //   if (code === '200' && data) {
      //     this.pagination.page = data.current
      //     this.pagination.rowsNumber = data.total
      //     this.pagination.rowsPerPage = data.size

      //     this.pagination.sortBy = sortBy
      //     this.pagination.descending = descending
      //     this.data = data.records
      //   }
      // }).catch(error => {
      //   console.error(error)
      // })
      setTimeout(() => {
        this.loading = false
      }, 200)
    }
  }
}
</script>
